@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Italianno');
@import url(menu.css);
@import url(hotdog.css);
@import url(especialidades.css);
@import url(fiestas.css);
@import url(ubicacion.css);
@import url(contacto.css);
@import url(historia.css);
@import url(fontello.css);

a{
letter-spacing: 2px;    
 font-family: 'Libre Franklin', sans-serif;     
}
h1,h2,h3,h4{
 font-family: 'Libre Franklin', sans-serif;  
letter-spacing: 5.5px;    
}
p{
font-family: monospace;   
}

img{
display: block;
max-width: 100%;
}

*{
 margin: 0;
 padding:0;
 box-sizing:border-box;
}

body{

        
}
	

header{
background:url('../img/fondo_madera6.jpg');
background-size: 100% 100%;    
width: 100%;
height: 130px;
position: relative;
top:0;
left: 0;
z-index: 100; 
}

header img{
display: block;
float: left;
margin-top:4px;    
width: 140px;
height:120px; 
}

.contenedor{
width: 95%;
margin: auto;
}

.best{
display: none;    
    
}

h2{    
float: right;
right: 25px;    
margin-top: 15px;
width: 110px;
height: 20px;    
}


section{
width: 100%;
}

header .contenedor{
display: table;
}

@media(min-width:768px){
    .best{
    display: block;
    position:absolute;
    float:left; 
    top:20px;
    left: 34.5%;    
    font-size: 30px;
    font-family: 'Italianno', cursive;        
    color:white;
    }

}
@media(min-width:1024px){
    header img{
    width:  180px;
    height: 140px;    
    }   
       
header h2{
width: 200px;
height:120px; 
}
    
    .best{
        margin-top: 20px;
       /* left:33%;
       */
        
    }    
    
}




/****************************** MENU ***********************/

#linea{
width: 100%;
height: 30px;    
}


#menu-bar{
display: none;    
}    
label{
 display:block;
}

header label{
position: absolute;
top: 130px;
left: 0;   
width: 100%;    
font-size: 18px;
color:#FFC300;
background:brown; 
padding: 5px;   
cursor: pointer;
}

label:hover{
background:  rgba(200,150,20,.5);  
transition: all 1s;  
color: yellow;
}

.menu{
position:absolute;
top: 160px;
left: 0;
width: 100%;
height: 100vh;    
transition: all 2s;
transform: translateX(-100%);
 }
   
.menu a{
display: block;
font-size: 14px;
color: orange;
background: brown;    
text-decoration: none;
padding: 15px;
border-bottom: 2px solid orange;  
}


.menu a:hover{
background: rgba(50,40,10,.9);
color: orange;
}

#menu-bar:checked ~ .menu{
transform: translateX(0%);
transition: all 2s;  
}
 
@media(min-width:1024px){
    header label{
        display: none;
    }  
    
   
    header{
        height: 161px;
    }
 
    
    .contenedor{
    width: 1150px;
    }

    .menu{
        position: static;
        margin-top:8%;
        margin-left:70px;
        width:auto;
        height: auto;
        transform: translateX(0%);
        float:left;
        display: flex;
      }
    
    .menu a{
       font-size: 16px;
       color: yellow;
       background: none;    
       border :none;
       font-family: 'Libre Franklin', sans-serif; 
       border-radius: 6%;
    }
    
.menu a:hover{
background: rgba(226, 26, 38, 0.6);
color: white;
}
    
}


 /*-------- B A N N E R   Y   S L I D E R------------*/


#banner{
top:131px;
background: url('../img/fondo_amarillo2.jpg');
background-size: 100% 100%;    
}

#banner img{
width: 100%;
height: 100%;
}

/*****  SLIDER BANNER ***/

#contenedor_slider {
margin: auto;    
width:100%;
position: relative;
overflow: hidden;
}

#slider{
display: flex;
width:400%;
}

#slider section{
width: 100%;    
}

#slider img{
display: block;
width: 100%; 
height: 100%;
max-height: 380px;    
}

#btn_prev,#btn_next{
position: absolute;
top:50%;
background:rgba(255,255,255,0.6);    
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;   
font-family: monospace;    
border-radius:50%; 
transform: translateY(-50%);
cursor: pointer;
}

#btn_prev:hover,#btn_next:hover{
background: rgba(255,255,255,1)    
}

#btn_prev{
left: 10px;

}
#btn_next{
right: 10px;    
}

@media(min-width:1024px){

    #linea{
        display: none;
    }
#btn_prev,#btn_next{
width: 40px;
height: 40px;
line-height: 38px;
font-size: 24px;   
}
}



/*-------SOLICITA ---------*/

#solicita_flex{
	display: flex;
	justify-content: space-around;
	}


.solicita{
	width: 100%;
	max-width: 450px;
	border: 4px solid orange;
}
/*--------------------- LOGO LETRAS -----------*/


#letras_rojas img{
width: 100%;
height: 90px;    
}

/*----------------------------B I E N V E N I D O S -------*/

#especial em{
font-weight: bolder;    
font-size: 16.5px;    
}
.logo_bienvenidos{
margin: auto;
width: 200px;
margin-bottom: 20px;    
}

h3{
text-align: center; 
font-size: 25px;  
font-weight: 100;    
color:darkslategray;
margin-bottom: 20px;    
}

p{
line-height: 25px;    
font-weight: lighter;
color:#808B96;
margin-bottom: 20px;
}

.tel{
font-size: 22px;    
    
}
.historia_txt{
margin-bottom: 40px; 
}
.leer{
text-decoration: none;
text-align: center;    
background: orange;
color:white;
font-size: 14px;    
padding: 10px 15px;
border-radius: 7px;       
}
 
.fiestas{
margin-top: 40px;   
}

.tel{
margin-top: 70px;  
font-size: 18px;    
}

.img_eventos{
display: block;
width: 100%;    
margin: auto;   
    
}
.eventos{
text-align: left;    
margin: auto;    

}

article{
margin: 20px;    
}

.contenedor_eventos{
-webkit-perspective:700;    
}

.carta{
width: 100%;
height: 100%;    
position: relative;
transform-style: preserve-3d;
transition: 2s;   
}

.carta:hover{
transform: rotateY(180deg);   
}
.lado{
width: 100%;
height: 100%; 
backface-visibility: hidden;
position: absolute;    
}

.frente{
background: red;
}

.atras{
background: yellow;    
transform: rotateY(180deg);
}


.atras img{
margin: auto;
height: 200px;
}

@media(min-width:468px){
    .logo_bienvenidos{
    display: none;    
        
    }
}

@media(min-width:768px){
    
    h3{
    font-size: 32px;    
        
    }
    
    .contenedor .entrada{
    display: flex;
    justify-content: space-between;
    }
    .contenedor_bienvenidos{
    margin-top: 40px;    
    width: 58%;    
    }
    .contenedor_eventos{
    width: 35%;    
        
    }
    .bienvenidos,.historia{
    text-align: left;    
    }
    .historia_txt{
    text-align: justify;
    }
    
    .eventos{
    text-align: justify;
    }
    .tel{
        font-size: 28px;
        margin-top: -20px;
    }
	

.solicita{
	width: 550px;
	border: 8px solid orange;
	margin: auto;
}	
	
	
	
}
    

@media(min-width:1024px){
   .logo_bienvenidos{
    display: block; 
    position: absolute;
    left:49%; /*635px; */   
    height: 200px;    
    } 
    
}



/*---------------------  F O O T E R ------*/

#otros_trata{
display: none;
}

#sect_footer{
background:saddlebrown;
}

.navegacion{
display: block;
margin-bottom: 20px;
color: white;
}
.navegacion_txt{
color: white;
}

.menu_footer{
display: inline-grid;    

}

.menu_footer a{
text-decoration: none;
margin-bottom: 18px;
font-size: 12px;   
color: white;
}

.sociales {
font-size: 24px;
display: block;
    
}

.sociales a{
color: white; 
text-decoration: none;    

}

.sucursales {
display: block;    
width: 100%;
margin: auto;    
color: white;
}


.regalo{
color: white;
font-size: 90px;    
}



#sect_footer img{
width: 100%;;
max-width: 160px;
}


#sect_footer iframe {
width: 320px;
max-width: 680px;    
border-radius: 3px;
border: 4px solid orange;
}


#sect_footer .contenedor{
display: flex;
justify-content:space-around;
flex-wrap: wrap; 
}
#info_footer{
margin: 15px;    
}

.fb-page{
width: 100%;  
border-radius: 50%;
max-width: 280px;    
}

@media (min-width:1024px){
    
footer #sect_footer{
 
}
    
    .fb-page{
        width: 100%;
        }
    #otros_trata{
        display: block;
        }
    #otros_trata p{
        text-align: left;
        padding-top: 10px;
        padding-left:10px;
    }
        
    #mapa_footer iframe{
    margin-top:  20px;  
     }
}